<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>六位帝皇玩酒店</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script src="${path}/style/jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="${path}/style/layui/css/layui.css">
    <link rel="stylesheet" href="${path}/style/layui/css/adminLogin.css">

</head>
<body>
<div class="wrap">
    <img src="${pageContext.request.contextPath}/style/layui/images/face/1.jpg" class="imgStyle">
    <div>
        <form class="loginForm">
            <div class="logoHead">
                <h2 style="margin-top: 15px">"六位帝皇玩"酒店管理</h2>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="ocName"
                           placeholder="输入用户名">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="ocPassword"
                           placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput" type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label> </label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="${path}/style/layui/layui.js" type="text/javascript"></script>
<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;
    })
    $(function () {
        // 页面初始化生成验证码
        window.onload = createCode('#loginCode');
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
    });

    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        for (var i = 0; i < codeLength; i++) {
            // 随机数索引
            var index = Math.floor(Math.random() * 36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }

    // 校验验证码、用户名、密码
    function validateCode(inputID, codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length <= 0) {
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length <= 0) {
            layer.alert("密码不能为空");
            return false;
        }
        if (inputCode.length <= 0) {
            layer.alert("验证码不能为空");
            return false;
        }
        if (inputCode != cardCode) {
            layer.alert("请输入正确验证码");
            return false;
        }

        $.ajax({
            url: "${pageContext.request.contextPath}/login?state=find",
            data: {"loginUsername": loginUsername, "loginPassword": loginPassword},
            // data: $(".loginForm").serialize(),
            dataType: "json",
            type: "post",
            success: function (data) {
                if (data.data == 1) {
                    layer.msg("登录成功！");
                    window.location.href = "${pageContext.request.contextPath}/back/index";
                    <%--window.location.href = "${pageContext.request.contextPath}/view/backstage/backstage.jsp";--%>
                } else {
                    layer.msg("登录失败！");
                    setTimeout(function () {
                        location.reload();
                    },1000);

                }
            }
        });
        return true;
    }

    // 登录流程
    function login() {
        if (!validateCode('#loginCard', '#loginCode')) {
            //阻断提示
        } else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var params = {};
            params.loginUsername = loginUsername;
            params.loginPassword = loginPassword;
            var loginLoadIndex = layer.load(2);
            $('#loginBtn').val("正在登录...");
            $.ajax({
                type: 'post',
                url: window.location.protocol + '//' + window.location.host + '/security-web/loginServlet.do',
                dataType: 'html',
                data: JSON.stringify(params),
                contentType: 'application/json',
                success: function (data) {
                    layer.close(loginLoadIndex);
                    var jsonData = JSON.parse(data);
                    if (jsonData.code == '999') {
                        window.location.href = './static/templates/main.html';
                    }
                },
                error: function () {
                    layer.close(loginLoadIndex);
                    $('#loginBtn').val("登录");
                }
            });
        }
    }
</script>
</body>
</html>




